import React from "react";
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
// https://www.amcharts.com/demos/trend-lines/
class AmSampleLine extends React.Component {
  componentDidMount() {
    // Create chart instance
    var chart = am4core.create("amchart-range", am4charts.XYChart);

    // Add data
    chart.data = [
      {
        date: new Date(2018, 3, 20),
        value: 90,
      },
      {
        date: new Date(2018, 3, 21),
        value: 102,
      },
      {
        date: new Date(2018, 3, 22),
        value: 65,
      },
      {
        date: new Date(2018, 3, 23),
        value: 62,
      },
      {
        date: new Date(2018, 3, 24),
        value: 55,
      },
      {
        date: new Date(2018, 3, 25),
        value: 81,
      },
    ];

    // Create axes
    var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
    dateAxis.startLocation = 0.5;
    dateAxis.endLocation = 0.5;

    // Create value axis
    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

    // Create series
    var series = chart.series.push(new am4charts.LineSeries());
    series.dataFields.valueY = "value";
    series.dataFields.dateX = "date";
    series.name = "Sales";
    series.strokeWidth = 3;
    series.fillOpacity = 0.5;

    // range.contents.stroke = am4core.color("#f00");
    // range.contents.fill = am4core.color("#f00");
    // range.contents.fillOpacity = 0.5;
    chart.events.on("ready", () => {
      // Create a range
      var range = dateAxis.axisRanges.create();
      range.date = new Date(2018, 3, 22);
      range.bullet = new am4core.Rectangle();
      const height = valueAxis.pixelHeight * valueAxis.anyToPosition(100);
      const width =
        (dateAxis.anyToPosition(new Date(2018, 3, 23)) + 0.04) *
        dateAxis.pixelWidth;
      range.bullet.width = width;
      range.bullet.height = height;
      range.bullet.dy = -height;
      range.bullet.fill = am4core.color("rgba(128,128,128,0.3)");
      range.bullet.zIndex = -1;
      range.bullet.endLocation = 0.5;
      range.bullet.startLocation = 0.5;
      chart.maskBullets = false;
      console.log({ chart, range, valueAxis, dateAxis });
    });
  }
  componentWillUnmount() {}
  render() {
    return (
      <div id="amchart-range" style={{ width: "100%", height: "500px" }}></div>
    );
  }
}
export default AmSampleLine;
